<template>
  <div>
    <button @click="animate">按钮</button>
    <div ref="guiji" class="guiji" id="guiji"></div>
  </div>
</template>

<script setup lang="ts">
import mapjson from './assets/map.json'
import mapboxgl from 'mapbox-gl'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
const bicycleIcon = new URL('./assets/cad-icon.png', import.meta.url).href
const guiji = ref(null) as any
const time = ref(null) as any
const map = ref(null) as any
const url = new URL('./assets/map_ing.json', import.meta.url).href
const sourceDatalist = [
  [120.721941, 30.286334],
  [120.710868, 30.297542],
  [120.706045, 30.309444],
  [120.704126, 30.330791],
  [120.70388, 30.365867],
  [120.692955, 30.377965],
  [120.658998, 30.385607],
  [120.633899, 30.389449],
  [120.567856, 30.387855],
  [120.498761, 30.38904],
  [120.460227, 30.382665],
  [120.43882, 30.373388],
  [120.413771, 30.318319],
  [120.378091, 30.344937],
  [120.388524, 30.370118],
  [120.400926, 30.377025],
  [120.398318, 30.38479],
  [120.362835, 30.374695],
  [120.342953, 30.37163],
  [120.318642, 30.380621],
  [120.315689, 30.394311],
  [120.306388, 30.396232],
  [120.322038, 30.404731],
  [120.332963, 30.417314],
  [120.330749, 30.427282],
  [120.340345, 30.433899],
  [120.337245, 30.464324],
  [120.341379, 30.472286],
  [120.329174, 30.468407],
  [120.326123, 30.500414],
  [120.317707, 30.521596],
  [120.299892, 30.5198],
  [120.285817, 30.507802],
  [120.277451, 30.504822],
  [120.25191, 30.506536],
  [120.239262, 30.50523],
  [120.224597, 30.509761],
  [120.205404, 30.505843],
  [120.201762, 30.514413],
  [120.195659, 30.503598],
  [120.185079, 30.502618],
  [120.185915, 30.494618],
  [120.173809, 30.492046],
  [120.180551, 30.482534],
  [120.175039, 30.476818],
  [120.149793, 30.467509],
  [120.146004, 30.482697],
  [120.11121, 30.476206],
  [120.096742, 30.48678],
  [120.099252, 30.495801],
  [120.068297, 30.496618],
  [120.065836, 30.483595],
  [120.059488, 30.47343],
  [120.059242, 30.459016],
  [120.0681, 30.445948],
  [120.062145, 30.434634],
  [120.064754, 30.4301],
  [120.046102, 30.427445],
  [120.041525, 30.433368],
  [120.013818, 30.435614],
  [120.00368, 30.444273],
  [119.982962, 30.445294],
  [119.965048, 30.431571],
  [119.955895, 30.433654],
  [119.950728, 30.444232],
  [119.934979, 30.446764],
  [119.931436, 30.456443],
  [119.921544, 30.462528],
  [119.90934, 30.456321],
  [119.90304, 30.459424],
  [119.890048, 30.457056],
  [119.872578, 30.462487],
  [119.880796, 30.476206],
  [119.867115, 30.477757],
  [119.854123, 30.493964],
  [119.851121, 30.502006],
  [119.836013, 30.496577],
  [119.815884, 30.510659],
  [119.794182, 30.505638],
  [119.784044, 30.511026],
  [119.766376, 30.514087],
  [119.768936, 30.551341],
  [119.743246, 30.550158],
  [119.729073, 30.551749],
  [119.71175, 30.566516],
  [119.69241, 30.556155],
  [119.695018, 30.542325],
  [119.70486, 30.525963],
  [119.709191, 30.508822],
  [119.704713, 30.494577],
  [119.708896, 30.487964],
  [119.701711, 30.467999],
  [119.695362, 30.464488],
  [119.694919, 30.452727],
  [119.709191, 30.434062],
  [119.686012, 30.417559],
  [119.681091, 30.408735],
  [119.668099, 30.399501],
  [119.6555, 30.40518],
  [119.646691, 30.39378],
  [119.633256, 30.395292],
  [119.63739, 30.410369],
  [119.631829, 30.424667],
  [119.642951, 30.428507],
  [119.650579, 30.440352],
  [119.635569, 30.441782],
  [119.627941, 30.431775],
  [119.594968, 30.421644],
  [119.581779, 30.423646],
  [119.572823, 30.431326],
  [119.565933, 30.443375],
  [119.55176, 30.43978],
  [119.535273, 30.424055],
  [119.533452, 30.409429],
  [119.513127, 30.401666],
  [119.490391, 30.408203],
  [119.467015, 30.408122],
  [119.450234, 30.410818],
  [119.441031, 30.392472],
  [119.435716, 30.391492],
  [119.418147, 30.376085],
  [119.403038, 30.373347],
  [119.399987, 30.367788],
  [119.386159, 30.363905],
  [119.375627, 30.354789],
  [119.349446, 30.349148],
  [119.342654, 30.363169],
  [119.326562, 30.371753],
  [119.300676, 30.363701],
  [119.289455, 30.349639],
  [119.278136, 30.341585],
  [119.265046, 30.338069],
  [119.247132, 30.340808],
  [119.239997, 30.327029],
  [119.245902, 30.321631],
  [119.233747, 30.293411],
  [119.225479, 30.288789],
  [119.222624, 30.299628],
  [119.205695, 30.301551],
  [119.201069, 30.291039],
  [119.188225, 30.291652],
  [119.156729, 30.299547],
  [119.151266, 30.304577],
  [119.12853, 30.3047],
  [119.11101, 30.311285],
  [119.090242, 30.324003],
  [119.073411, 30.315865],
  [119.062978, 30.304945],
  [119.050823, 30.306745],
  [119.048313, 30.312675],
  [119.028775, 30.312593],
  [119.004464, 30.328951],
  [118.988027, 30.333489],
  [118.988126, 30.348698],
  [118.975724, 30.347145],
  [118.969031, 30.351356],
  [118.959385, 30.347267],
  [118.955399, 30.359204],
  [118.936452, 30.350824],
  [118.936354, 30.34506],
  [118.917899, 30.332467],
  [118.908401, 30.330872],
  [118.899789, 30.322572],
  [118.879857, 30.314884],
  [118.881826, 30.298524],
  [118.878086, 30.282734],
  [118.8897, 30.254258],
  [118.882417, 30.247465],
  [118.892554, 30.243249],
  [118.903184, 30.217913],
  [118.924986, 30.213861],
  [118.929858, 30.20338],
  [118.920655, 30.198999],
  [118.910812, 30.187493],
  [118.864405, 30.168983],
  [118.85284, 30.166566],
  [118.845704, 30.156122],
  [118.856383, 30.148216],
  [118.865733, 30.151493],
  [118.877348, 30.147396],
  [118.896787, 30.148093],
  [118.89595, 30.138793],
  [118.888125, 30.127239],
  [118.887239, 30.117446],
  [118.871639, 30.113021],
  [118.868883, 30.101464],
  [118.872918, 30.094619],
  [118.875478, 30.072033],
  [118.878824, 30.064653],
  [118.888125, 30.062357],
  [118.897328, 30.049646],
  [118.890586, 30.04128],
  [118.902594, 30.029059],
  [118.898017, 30.017246],
  [118.89034, 30.012037],
  [118.895015, 30.000386],
  [118.892062, 29.994806],
  [118.899493, 29.98143],
  [118.891521, 29.959885],
  [118.894867, 29.939197],
  [118.88468, 29.93891],
  [118.871983, 29.946873],
  [118.863913, 29.93698],
  [118.848263, 29.941249],
  [118.838716, 29.934476],
  [118.844916, 29.915261],
  [118.845507, 29.899082],
  [118.841324, 29.891319],
  [118.807712, 29.86766],
  [118.802593, 29.860676],
  [118.778725, 29.841899],
  [118.766963, 29.848925],
  [118.755595, 29.845432],
  [118.750969, 29.831625],
  [118.76593, 29.823077],
  [118.75781, 29.816747],
  [118.745999, 29.818186],
  [118.739946, 29.813295],
  [118.736501, 29.788465],
  [118.744325, 29.779626],
  [118.74905, 29.761121],
  [118.744719, 29.738788],
  [118.72464, 29.722621],
  [118.718686, 29.709167],
  [118.700821, 29.706452],
  [118.691668, 29.693942],
  [118.682908, 29.688345],
  [118.682367, 29.681061],
  [118.673902, 29.669083],
  [118.647327, 29.643394],
  [118.640929, 29.641912],
  [118.633498, 29.648788],
  [118.620014, 29.654099],
  [118.602051, 29.643683],
  [118.573902, 29.638371],
  [118.555053, 29.613416],
  [118.549886, 29.613416],
  [118.53522, 29.590638],
  [118.515486, 29.583305],
  [118.499689, 29.573623],
  [118.494915, 29.553721],
  [118.497868, 29.543995],
  [118.495899, 29.519553],
  [118.470407, 29.507473],
  [118.459826, 29.505577],
  [118.44895, 29.51341],
  [118.430594, 29.503721],
  [118.414994, 29.509741],
  [118.393045, 29.507308],
  [118.383005, 29.510153],
  [118.379806, 29.502567],
  [118.358694, 29.477083],
  [118.344964, 29.475681],
  [118.345751, 29.465123],
  [118.352543, 29.45279],
  [118.366371, 29.45015],
  [118.372917, 29.437815],
  [118.384137, 29.433276],
  [118.390289, 29.423951],
  [118.402051, 29.425189],
  [118.413173, 29.420568],
  [118.405397, 29.408147],
  [118.425771, 29.397623],
  [118.423655, 29.387345],
  [118.441224, 29.375911],
  [118.448754, 29.37525],
  [118.456234, 29.365879],
  [118.470112, 29.360098],
  [118.479167, 29.366539],
  [118.488813, 29.367241],
  [118.505742, 29.359273],
  [118.517504, 29.363484],
  [118.524344, 29.36142],
  [118.519079, 29.344366],
  [118.528577, 29.345275],
  [118.55151, 29.335694],
  [118.571687, 29.338337],
  [118.589059, 29.327888],
  [118.596047, 29.330821],
  [118.603823, 29.323552],
  [118.603478, 29.316447],
  [118.617209, 29.303146],
  [118.614404, 29.296577],
  [118.634138, 29.272984],
  [118.63276, 29.263149],
  [118.619177, 29.276786],
  [118.610614, 29.279472],
  [118.606677, 29.267116],
  [118.615437, 29.25075],
  [118.607612, 29.239713],
  [118.620112, 29.219291],
  [118.631825, 29.219622],
  [118.633646, 29.205605],
  [118.626855, 29.19568],
  [118.638321, 29.192165],
  [118.670162, 29.200518],
  [118.68463, 29.202545],
  [118.708843, 29.188774],
  [118.743735, 29.213668],
  [118.753036, 29.213875],
  [118.765438, 29.220614],
  [118.767259, 29.234133],
  [118.763912, 29.248311],
  [118.774985, 29.250998],
  [118.784778, 29.259099],
  [118.786402, 29.266744],
  [118.793637, 29.267943],
  [118.816865, 29.281703],
  [118.82656, 29.280298],
  [118.828775, 29.287446],
  [118.855743, 29.303311],
  [118.860664, 29.31496],
  [118.878332, 29.326567],
  [118.886354, 29.322354],
  [118.900428, 29.332638],
  [118.927053, 29.310375],
  [118.94408, 29.306286],
  [118.948017, 29.301122],
  [118.962092, 29.296164],
  [118.961895, 29.290215],
  [118.949641, 29.281744],
  [118.963322, 29.267653],
  [118.966816, 29.269348],
  [118.988224, 29.243558],
  [118.984828, 29.239465],
  [118.987141, 29.226071],
  [118.998903, 29.216355],
  [119.003234, 29.207714],
  [119.013076, 29.212386],
  [119.030596, 29.215074],
  [119.062929, 29.226278],
  [119.075675, 29.224004],
  [119.085222, 29.230578],
  [119.106384, 29.227518],
  [119.12351, 29.236737],
  [119.132565, 29.235456],
  [119.12912, 29.227063],
  [119.138126, 29.220242],
  [119.151758, 29.22789],
  [119.170459, 29.217596],
  [119.177693, 29.207259],
  [119.189504, 29.205191],
  [119.194918, 29.216314],
  [119.189504, 29.227105],
  [119.201709, 29.229379],
  [119.204465, 29.223549],
  [119.213668, 29.225203],
  [119.210272, 29.23066],
  [119.2148, 29.246947],
  [119.200922, 29.257487],
  [119.192211, 29.258479],
  [119.20038, 29.272158],
  [119.200282, 29.29038],
  [119.208156, 29.284389],
  [119.228727, 29.284182],
  [119.227103, 29.276827],
  [119.239308, 29.258933],
  [119.237782, 29.250708],
  [119.260912, 29.247815],
  [119.270656, 29.251659],
  [119.288077, 29.268852],
  [119.286011, 29.279348],
  [119.318294, 29.279885],
  [119.322625, 29.296164],
  [119.328629, 29.299263],
  [119.3242, 29.307979],
  [119.348806, 29.319504],
  [119.344278, 29.324378],
  [119.348462, 29.336231],
  [119.333058, 29.355061],
  [119.340145, 29.38235],
  [119.328629, 29.393413],
  [119.337093, 29.411159],
  [119.346395, 29.408724],
  [119.360223, 29.416276],
  [119.368294, 29.415699],
  [119.378137, 29.42981],
  [119.388521, 29.429728],
  [119.39354, 29.411242],
  [119.399938, 29.411242],
  [119.404761, 29.400677],
  [119.426759, 29.405547],
  [119.43232, 29.415162],
  [119.427793, 29.422177],
  [119.437143, 29.424116],
  [119.443147, 29.404556],
  [119.451365, 29.397292],
  [119.451858, 29.385611],
  [119.457566, 29.370379],
  [119.45481, 29.365259],
  [119.461454, 29.350932],
  [119.471493, 29.349033],
  [119.480204, 29.332968],
  [119.49231, 29.331069],
  [119.500037, 29.335735],
  [119.510421, 29.333464],
  [119.522724, 29.350024],
  [119.523905, 29.366003],
  [119.536061, 29.373145],
  [119.545411, 29.367365],
  [119.558551, 29.372154],
  [119.574594, 29.372773],
  [119.582075, 29.379131],
  [119.592901, 29.377686],
  [119.604565, 29.369636],
  [119.616277, 29.368273],
  [119.617606, 29.380369],
  [119.606238, 29.388088],
  [119.625529, 29.410499],
  [119.624939, 29.417762],
  [119.642508, 29.432946],
  [119.664408, 29.424075],
  [119.673413, 29.425024],
  [119.676317, 29.419206],
  [119.688916, 29.421764],
  [119.691179, 29.438763],
  [119.707272, 29.433235],
  [119.715835, 29.448995],
  [119.707124, 29.464215],
  [119.70678, 29.472382],
  [119.719575, 29.491146],
  [119.718837, 29.505288],
  [119.726908, 29.511555],
  [119.735422, 29.510936],
  [119.74492, 29.516419],
  [119.722626, 29.542759],
  [119.741081, 29.551908],
  [119.750678, 29.550713],
  [119.764211, 29.557347],
  [119.761652, 29.566536],
  [119.769182, 29.579556],
  [119.764949, 29.594675],
  [119.779319, 29.603984],
  [119.776514, 29.626841],
  [119.79118, 29.654963],
  [119.817607, 29.673076],
  [119.824448, 29.671841],
  [119.835422, 29.678138],
  [119.852499, 29.668877],
  [119.859536, 29.671347],
  [119.879271, 29.66793],
  [119.895708, 29.660644],
  [119.911702, 29.66649],
  [119.921249, 29.66402],
  [119.924792, 29.669906],
  [119.936161, 29.666531],
  [119.973119, 29.674804],
  [119.973464, 29.68995],
  [119.967411, 29.694889],
  [119.951269, 29.699292],
  [119.937735, 29.70748],
  [119.933454, 29.699415],
  [119.922529, 29.697769],
  [119.914655, 29.704682],
  [119.912489, 29.720399],
  [119.901367, 29.728627],
  [119.900481, 29.74467],
  [119.889064, 29.753102],
  [119.890343, 29.762931],
  [119.904369, 29.754582],
  [119.913572, 29.755857],
  [119.927204, 29.744423],
  [119.944576, 29.755528],
  [119.960275, 29.755158],
  [119.973119, 29.765809],
  [119.991968, 29.753143],
  [120.010915, 29.757214],
  [120.011505, 29.761491],
  [120.030059, 29.770538],
  [120.030059, 29.78275],
  [120.036604, 29.788548],
  [120.030059, 29.806307],
  [120.038425, 29.82283],
  [120.065639, 29.822049],
  [120.074252, 29.82731],
  [120.095807, 29.816583],
  [120.102746, 29.823981],
  [120.101122, 29.830269],
  [120.109931, 29.845967],
  [120.131289, 29.858827],
  [120.144773, 29.874109],
  [120.150285, 29.887582],
  [120.150039, 29.905036],
  [120.159587, 29.906227],
  [120.166329, 29.917273],
  [120.17627, 29.913578],
  [120.185079, 29.904502],
  [120.204813, 29.924048],
  [120.200433, 29.929467],
  [120.221004, 29.942235],
  [120.250729, 29.936693],
  [120.255207, 29.94363],
  [120.264754, 29.930986],
  [120.265296, 29.924499],
  [120.2744, 29.919531],
  [120.284144, 29.922159],
  [120.291034, 29.935666],
  [120.312048, 29.927702],
  [120.325188, 29.93854],
  [120.326073, 29.946216],
  [120.340493, 29.956068],
  [120.346447, 29.973797],
  [120.360473, 29.973674],
  [120.364312, 29.978516],
  [120.360473, 29.98857],
  [120.362835, 29.99776],
  [120.35693, 30.011708],
  [120.345808, 30.019707],
  [120.343593, 30.034924],
  [120.331831, 30.037918],
  [120.324941, 30.048621],
]

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'LineString', // 线类型
        coordinates: [],
      },
    },
  ],
} as any

const geojsonIcon = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point', // 重点!!!!!!!类型  图片类型
        coordinates: [],
      },
      properties: {
        bearing: 0,
      },
    },
    // {
    //   type: 'FeatureCollection',
    //   features: [
    //     {
    //       type: 'Feature',
    //       geometry: {
    //         type: 'Point',
    //         coordinates: [120.721941, 30.286334],
    //       },
    //     },
    //   ],
    // },
  ],
} as any
let counterIndex = 0
let symbolIconRotate = -90 // 图片角度
let symbolIconSize = 0.3
function animate() {
  // time.value && clearInterval(time.value)

  if (counterIndex > sourceDatalist.length) {
    return
  }

  let startPoint, endPoint
  if (counterIndex === 0) {
    startPoint = sourceDatalist[counterIndex]
    endPoint = sourceDatalist[counterIndex + 1]
  } else {
    startPoint = sourceDatalist[counterIndex - 1]
    endPoint = sourceDatalist[counterIndex]
  }

  // 计算icon角度
  geojsonIcon.features[0].properties.bearing =
    turf.bearing(turf.point(startPoint), turf.point(endPoint)) +
    symbolIconRotate

  geojsonIcon.features[0].geometry.coordinates = sourceDatalist[counterIndex]

  geojson.features[0].geometry.coordinates.push(sourceDatalist[counterIndex])
  map.value.flyTo(
    {
      center: sourceDatalist[counterIndex],
      zoom: 9,
      duration: 800,
    },
    { moveend: 'FLY_END' },
  )
  map.value.getSource('iconSource').setData(geojsonIcon)
  map.value.getSource('pathSource').setData(geojson)

  counterIndex += 1

  // time.value = setInterval(() => animate(), 3 * 100)
  requestAnimationFrame(animate)
}

function initMap() {
  mapboxgl.accessToken =
    'pk.eyJ1IjoieGlueGlhbmciLCJhIjoiY2w0ZTNnMGs3MDBkdzNscDBjb3pjaWQ5YiJ9.d2Zjk81sQFYpiQ_BxiCHYA'

  const Map = new mapboxgl.Map({
    container: 'guiji', // container ID
    center: [120.721941, 30.286334],
    zoom: 13,
    minZoom: 6,
    maxZoom: 17,
    style: 'mapbox://styles/mapbox/light-v10', // style URL or style object
    hash: true, // sync `center`, `zoom`, `pitch`, and `bearing` with URL
    // pitch: 30, // 倾斜高度
    // bearing: -10, // 轴距高度
  })

  map.value = Map

  Map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }))

  Map.loadImage(bicycleIcon, (err, image) => {
    // { sdf: false }  这个是图片是否存在颜色
    Map.addImage('bicycle-icon', image, { sdf: false })
  })
  Map.on('load', () => {
    sourceDatalist.length > 0 &&
      Map.flyTo(
        {
          center: sourceDatalist[0],
          zoom: 10,
          duration: 500,
        },
        { moveend: 'FLY_END' },
      )
    // 第一层数据源图层
    Map.addSource('pathSourceDone', {
      type: 'geojson',
      lineMetrics: true,
      data: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: sourceDatalist,
            },
          },
        ],
      },
    })
    // 第一层路径
    Map.addLayer({
      id: 'pathLayerDone',
      type: 'line',
      source: 'pathSourceDone',
      layout: {
        // 'line-join': 'round',
        // 'line-cap': 'round',
      },
      paint: {
        'line-color': 'pink',
        'line-width': 3,
      },
    })
    // 需要覆盖的动态数据层
    Map.addSource('pathSource', {
      type: 'geojson',
      lineMetrics: true,
      data: geojson,
    })
    // 需要覆盖的动态数层的线
    Map.addLayer({
      id: 'pathLayer',
      type: 'line',
      source: 'pathSource',
      layout: {
        'line-join': 'round',
        'line-cap': 'round',
      },
      paint: {
        'line-width': 5,
        'line-color': 'blue',
      },
    })
    // 开始结束的点
    let startEndGeojson = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          properties: {
            typeColor: 'start',
          },
          geometry: {
            type: 'Point',
            coordinates: sourceDatalist[0],
          },
        },
        {
          type: 'Feature',
          properties: {
            typeColor: 'end',
          },
          geometry: {
            type: 'Point',
            coordinates: sourceDatalist[sourceDatalist.length - 1],
          },
        },
      ],
    }
    // 开始结束的数据图层
    Map.addSource('startEndSource', {
      type: 'geojson',
      data: startEndGeojson,
    })
    // 起点和终点
    Map.addLayer({
      id: 'startEnd-layer',
      type: 'circle',
      source: 'startEndSource',
      paint: {
        'circle-radius': 5,
        'circle-color': [
          'match',
          ['get', 'typeColor'],
          'start',
          'green',
          'end',
          'red',
          '#cccccc',
        ],
      },
    })

    // 图片图层
    Map.addSource('iconSource', {
      type: 'geojson',
      data: geojsonIcon,
      // {
      //   type: 'FeatureCollection',
      //   features: [
      //     {
      //       type: 'Feature',
      //       geometry: {
      //         type: 'Point',
      //         coordinates: [120.721941, 30.286334],
      //       },
      //     },
      //   ],
      // }
    })

    Map.addLayer({
      id: 'bicycleIcon',
      type: 'symbol',
      source: 'iconSource',
      layout: {
        'icon-image': 'bicycle-icon',
        'icon-size': symbolIconSize,
        'icon-rotate': ['get', 'bearing'],
        'icon-rotation-alignment': 'map',
        'icon-allow-overlap': true,
        'icon-ignore-placement': true,
      },
    })
  })
}

onMounted(() => {
  initMap()
})
</script>

<style>
.guiji {
  width: 500px;
  height: 500px;
  /* position: absolute; */
  overflow: hidden;
}
</style>
